<template>
  <div class="search">
    <div class="form form-inline">
      <input type="text" class="form-control input-sm" placeholder="电话" v-model="search.mobile">
      <input type="text" class="form-control input-sm" placeholder="姓名" v-model="search.name">
      <input type="text" class="form-control input-sm" placeholder="公司" v-model="search.company">
      <button class="btn btn-sm btn-primary" @click.prev="searchUser">搜索</button>
    </div>
  </div>
  <table v-show="list && list.length > 0" class="table table-bordered table-hover">
    <caption>订阅用户名单</caption>
    <thead>
      <tr>
        <th class="col-xs-2">姓名<br>电话</th>
        <th class="col-xs-2">公司<br>职位</th>
        <th>起止时间</th>
        <th>期刊</th>
        <th>备注</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="it in list">
        <td>
          姓名：{{it.name}}<br>
          电话：{{it.mobile}}
        </td>
        <td>
          公司：{{it.company}}<br>
          职位：{{it.jobTitle}}
        </td>
        <td class="col-nowrap">
          <div v-if="it.vipStartTime && it.vipEndTime">
            从 {{it.vipStartTime}}<br>
            至 {{it.vipEndTime}}
          </div>
        </td>
        <td>
          <p class="circle" v-for="circle in it.circles">{{circle.title}}</p>
        </td>
        <td>
          {{it.remark}}
        </td>
        <td class="col-nowrap text-right">
          <button class="btn btn-sm btn-primary" @click="updateUser(it)">修改用户信息</button>
          <button class="btn btn-sm btn-primary" @click="subscribe(it.id)">订阅产品</button>
          <button class="btn btn-sm btn-danger" @click="deleteUser(it.id)">删除用户</button>
        </td>
      </tr>
    </tbody>
  </table>
  <vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
  <vue-user-subscribe v-ref:subscribe></vue-user-subscribe>
</template>
<style src="./user-list.css" scoped></style>
<script src="./user-list.js"></script>